<template>
    <div class="upload-list-item">

        <span class="el-icon-loading" v-if="status == 'uploading'" style="margin-right: 5px"></span>

        <div class="item item-name" :title="name || '??'">{{ name || '??' }}</div>
        <div class="item item-size">{{ _2ConvertSize }}</div>

        <el-progress v-if="status == 'uploading'" class="item" type="circle" :width="30" :stroke-width="4" :percentage="progress || 0" color="green"></el-progress>

        <el-progress v-else-if="status == 'success'" class="item" type="circle" :width="30" :stroke-width="4" :percentage="100" status="success"></el-progress>

        <el-progress v-else-if="status == 'error'" class="item" type="circle" :width="30" :stroke-width="4" :percentage="100" status="exception"></el-progress>

        <el-tag v-else-if="status == 'waiting'" class="item waiting-desc">待</el-tag>

        <el-tag v-else-if="status == 'cancel'" class="item waiting-desc" type="danger">消</el-tag>

        <span class="item actions">
            <!-- <el-tooltip :content="_tooltip"> -->
            <!-- <el-button v-if="status == 'cancel'" icon="el-icon-loading" type="danger"></el-button> -->
            <el-button type="danger" v-if="status == 'uploading' " icon=" el-icon-delete" @click="_onDeleteClick">取消</el-button>
            <el-button type="danger" v-else icon="el-icon-delete" @click="_onDeleteClick">删除</el-button>

            <!-- </el-tooltip> -->
        </span>
    </div>
</template>
<script>

import $fileUTIL from '@utils/file';
// import { Component, Prop, Vue } from 'vue-property-decorator';
// @Component({})

export default {
    name: 'upload-list-item',
    props: {
        name: { type: String, default: '??' },
        size: { type: Number, default: 0 },
        status: { type: String, default: '' },
        progress: { type: Number, default: 0 }
    },
    computed: {
        _2ConvertSize() {
            return $fileUTIL.bytes2size(this.size);
        },
        _tooltip() {
            switch (this.status) {
                case ('success'): return '删除记录';
                case ('uploading'): return '取消';
                default: return '移除';
            }
        }
    },

    // @Prop({ type: String, default: '??' }) name;

    // @Prop({ type: Number, default: 0 }) size;

    // @Prop({ type: String, default: '' }) status;

    // @Prop({ type: Number, default: 0 }) progress;

    // get _2ConvertSize() {
    //     return $fileUTIL.bytes2size(this.size);
    // }
    // get _tooltip() {
    //     switch (this.status) {
    //         case ('success'): return '删除记录';
    //         case ('uploading'): return '取消上传';
    //         default: return '移除';
    //     }
    // }
    methods: {
        /**
         * 点击删除
         */
        _onDeleteClick() {
            this.$emit('on-delete-click');
        }
    }
}
</script>

<style lang="scss" scoped>
.upload-list-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 5px;
    // font-size: 0.9rem;
    font-size: 10px;
    width: 100%;

    .item-name {
        width: 0;
        flex: 1;
        @extend %text-truncate;
    }
    .item-size {
        text-align: center;
    }

    .item-desc {
        display: flex;
        align-items: center;
    }

    .item {
        position: relative;
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }

    .progress {
        flex: 1;
    }

    .waiting-desc.el-tag {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 10px;
        /* text-align: center;*/
    }

    .el-progress {
        /deep/.el-progress__text {
            font-size: 10px !important;
            transform: scale(0.7);
            height: 30px;
            top: 0 !important;
            line-height: 30px;
            color: black;
        }
        &.is-success {
            /deep/.el-progress__text {
                transform: scale(1);
            }
        }
    }

    .actions {
        .el-button {
            padding: 5px !important;
            /deep/i::before {
                font-size: 16px !important;
            }
        }
    }
}
</style>